<nb-card>
  <nb-card-header>Button Dropdowns</nb-card-header>
  <nb-card-body>
    <div class="dropdown btn-group" ngbDropdown>
      <button type="button" class="btn btn-primary">Dropdown</button>
      <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
      <ul class="dropdown-menu" ngbDropdownMenu>
        <li class="dropdown-item">Icon Button</li>
        <li class="dropdown-item">Hero Button</li>
        <li class="dropdown-item">Default</li>
      </ul>
    </div>
    <div class="dropdown" ngbDropdown>
      <button class="btn btn-primary" type="button" ngbDropdownToggle>
        Dropdown
      </button>
      <ul class="dropdown-menu" ngbDropdownMenu>
        <li class="dropdown-item">Icon Button</li>
        <li class="dropdown-item">Hero Button</li>
        <li class="dropdown-item">Default</li>
      </ul>
    </div>
    <div class="dropdown" placement="top" ngbDropdown>
      <button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
        Dropup
      </button>
      <ul class="dropdown-menu" ngbDropdownMenu>
        <li class="dropdown-item">Icon Button</li>
        <li class="dropdown-item">Hero Button</li>
        <li class="dropdown-item">Default</li>
      </ul>
    </div>
    <div class="dropdown ghost-dropdown" ngbDropdown>
      <button class="btn btn-primary" type="button" ngbDropdownToggle>
        Dropdown
      </button>
      <ul class="dropdown-menu" ngbDropdownMenu>
        <li class="dropdown-item">Icon Button</li>
        <li class="dropdown-item">Hero Button</li>
        <li class="dropdown-item">Default</li>
      </ul>
    </div>
  </nb-card-body>
</nb-card>
